<template>
  <div
    style="display: flex; justify-content: space-between; margin-bottom: 10px"
  >
    <a-date-picker
      mode="year"
      placeholder="请选择年份"
      format="YYYY"
      :value="yearPick"
      :open="yearPickShow"
      :clearable="false"
      @panelChange="handlePanelChange"
      @openChange="handleOpenChange"
    />

    <a-button type="primary" @click="exprot"> 导出 </a-button>
  </div>
  <a-table
    :columns="columns"
    :data-source="data"
    bordered
    size="middle"
    :rowKey="
      (record, index) => {
        return index;
      }
    "
    :pagination="false"
    :scroll="{ x: 'calc(700px + 50%)', y: 700 }"
    class="mytable"
    :rowClassName="setRowClassName"
    :loading="tbLoading"
  />
<!-- 
  <div style="background-color: #ececec; padding: 20px" class="mycard">
    <a-row :gutter="16">
      <a-col :span="24">
        <a-card title="个人得分排行榜" :bordered="false">
          <div class="echart-pic">
            <a-spin tip="Loading..." :spinning="echar1Loading"></a-spin>
            <div class="about main" id="main1"></div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="24">
        <a-card title="个人在途/备案项目得分统计" :bordered="false">
          <div class="echart-pic">
            <a-spin tip="Loading..." :spinning="echar3Loading"></a-spin>
            <div class="about main" id="main3"></div>
          </div>
        </a-card>
      </a-col>
       <a-col :span="24">
        <a-card title="个人在途/备案项目数量统计" :bordered="false">
          <div class="echart-pic">
            <a-spin tip="Loading..." :spinning="echar8Loading"></a-spin>
            <div class="about main" id="main8"></div>
          </div>
        </a-card>
      </a-col>
        <a-col :span="24">
        <a-card title="个人合同额排行榜" :bordered="false">
          <div class="echart-pic">
            <a-spin tip="Loading..." :spinning="echar5Loading"></a-spin>
            <div class="about main" id="main5"></div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="分公司得分榜" :bordered="false">
          <div class="echart-pic">
            <a-spin tip="Loading..." :spinning="echar2Loading"></a-spin>
            <div class="about main" id="main2"></div>
          </div>
        </a-card>
      </a-col>
      
      <a-col :span="12">
        <a-card title="分公司在途/备案项目数量统计" :bordered="false">
          <div class="echart-pic">
            <a-spin tip="Loading..." :spinning="echar7Loading"></a-spin>
            <div class="about main" id="main7"></div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="分公司在途/备案项目得分统计" :bordered="false">
          <div class="echart-pic">
            <a-spin tip="Loading..." :spinning="echar4Loading"></a-spin>
            <div class="about main" id="main4"></div>
          </div>
        </a-card>
      </a-col>
    
      <a-col :span="12">
        <a-card title="分公司合同额排行榜" :bordered="false">
          <div class="echart-pic">
            <a-spin tip="Loading..." :spinning="echar6Loading"></a-spin>
            <div class="about main" id="main6"></div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div> -->

  <!-- main2 -->
</template>
<script>
import { request } from "../../utils/request";
import { h } from "vue";
import moment from "moment";
const renderContent = ({ text }) => {
  const obj = {
    children: text,
    props: {},
  };

  // if (!Number(text)) {
  //   obj.props.colSpan = 1;
  // }

  return obj;
};

const departmentsIndex = []; // 存储部门的index
const nowYear = new Date().getFullYear();
const columns = [
  {
    title: "序号",
    dataIndex: "number",
    key: "number",
    customRender: ({ text, record }) => {
      if (!record.time) {
        return {
          children: h(
            "span",
            {
              href: "javascript:;",
            },
            text
          ),
          props: {
            colSpan: 4,
          },
        };
      } else {
        return h(
          // 'a',
          // {
          //   href: 'javascript:;',
          // },
          text
        );
      }
    },

    width: 40,
    fixed: "left",
  },
  {
    title: "部门",
    dataIndex: "department",
    key: "department",
    width: 100,
    fixed: "left",
    customRender: ({ text, record }) => {
      const obj = {
        children: text,
        props: {},
      };

      if (!record.time) {
        obj.props.colSpan = 0;
      }

      return obj;
    },
  },
  {
    title: "入职时间",
    dataIndex: "time",
    key: "time",
    width: 100,
    fixed: "left",
    customRender: ({ text, record }) => {
      const obj = {
        children: text,
        props: {},
      };

      if (!record.time) {
        obj.props.colSpan = 0;
      }

      return obj;
    },
  },
  {
    title: "姓名",
    dataIndex: "name",
    key: "name11",
    width: 100,
    fixed: "left",
    customRender: ({ text, record }) => {
      const obj = {
        children: text,
        props: {},
      };

      if (!record.time) {
        obj.props.colSpan = 0;
      }

      return obj;
    },
  },
  {
    title: "合同回款额（万元）",
    customRender: renderContent,
    children: [
      {
        title: nowYear + "年以前",
        dataIndex: "before",
        key: "before",
        width: 100,
      },
      {
        title: nowYear+ "年",
        dataIndex: "after",
        key: "after",
        width: 100,
      },
    ],
  },
  {
    title: nowYear + "年回款率",
    customRender: ({ text }) => {
      const obj = {
        children: text,
        props: {},
      };
      return obj;
    },
    dataIndex: "huikuanlv",
    key: "huikuanlv",
    width: 100,
  },
  {
    title: "合同得分",
    customRender: renderContent,
    children: [
      {
        title: "全年合同额（万元）",
        dataIndex: "quannian",
        key: "quannian",
        width: 100,
      },
      {
        title: "一季度合同额（万元）",
        dataIndex: "yijidu",
        key: "yijidu",
        width: 100,
      },
      {
        title: "二季度合同额（万元）",
        dataIndex: "erjidu",
        key: "erjidu",
        width: 100,
      },
      {
        title: "三季度合同额（万元）",
        dataIndex: "sanjidu",
        key: "sanjidu",
        width: 100,
      },
      {
        title: "四季度合同额（万元）",
        dataIndex: "sijidu",
        key: "sijidu",
        width: 100,
      },
      {
        title: "小计",
        dataIndex: "hetongexiaoji",
        key: "hetongexiaoji",
        width: 100,
      },
    ],
  },
  {
    title: "总共在途项目分-以合同额记（万元）",
    customRender: renderContent,
    children: [
      {
        title: "申报数",
        dataIndex: "zaitushu",
        key: "zaitushu",
        width: 100,
      },
      {
        title: "500以下及未有预算",
        dataIndex: "wubaiyixia",
        key: "wubaiyixia",
        width: 100,
      },
      {
        title: "500-1500",
        dataIndex: "wubaidaoyiqianwu",
        key: "wubaidaoyiqianwu",
        width: 100,
      },
      {
        title: "1500以上",
        dataIndex: "yiqianwuyishang",
        key: "yiqianwuyishang",
        width: 100,
      },
      {
        title: "小计",
        dataIndex: "zaituxiaoji",
        key: "zaituxiaoji",
        width: 100,
      },
    ],
  },
  {
    title: "总共备案项目分-以合同额记（万元）",
    customRender: renderContent,
    children: [
      {
        title: "申报数",
        dataIndex: "beianshu",
        key: "beianshu",
        width: 100,
      },
      {
        title: "常规项目",
        dataIndex: "changguixiangmu",
        key: "changguixiangmu",
        width: 100,
      },
      {
        title: "重点项目",
        dataIndex: "zhongdianxiangmu",
        key: "zhongdianxiangmu",
        width: 100,
      },
      {
        title: "小计",
        dataIndex: "beianxiaoji",
        key: "beianxiaoji",
        width: 100,
      },
    ],
  },
  {
    title: "投标分",
    customRender: renderContent,
    children: [
      {
        title: "投标数",
        dataIndex: "toubiaoshu",
        key: "toubiaoshu",
        width: 100,
      },
      {
        title: "小计",
        dataIndex: "toubiaoxiaoji",
        key: "toubiaoxiaoji",
        width: 100,
      },
    ],
  },
  {
    title: "日报考核分",
    dataIndex: "richangfen",
    key: "richangfen",
    width: 80,
    fixed: "right",
    customRender: ({ text }) => {
      const obj = {
        children: text,
        props: {},
      };
      return obj;
    },
  },
  {
    title: "总分",
    dataIndex: "total",
    key: "total",
    width: 80,
    fixed: "right",
    customRender: ({ text }) => {
      const obj = {
        children: text,
        props: {},
      };
      return obj;
    },
  },
];

const data = [];
const columns1 = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "总分",
    dataIndex: "total",
    key: "total",
  },
];
const data1 = [];

export default {
  data() {
    return {
      data,
      columns,
      columns1,
      data1,
      departmentsIndex,
      yearPick: null, //年选择器的值
      yearPickShow: false, //年选择器的显示隐藏
      tbLoading : true,
      echar1Loading: true,
      echar2Loading: true,
      echar3Loading: true,
      echar4Loading: true,
      echar5Loading: true,
      echar6Loading: true,
      echar7Loading: true,
      echar8Loading: true,
    };
  },
  mounted() {
    console.log(this.$route.params.user)
    
    // var date = new Date();
    // var nowYear = date.getFullYear(); //获取完整的年份(4位)

    //  var YEAR  = moment().year();
    //  console.log(YEAR,"YEAR")
    this.yearPick = moment(new Date()).format("YYYY");
    // console.log(this.yearPick,"666")
    this.init();
  },
  methods: {
    setRowClassName(record) {
      if (!record.time) {
        return "rowcolor";
      } else {
        return "rowcolor2";
      }
    },
    moment,
    init() {
      let myindex = 0;
      this.data = [];
      this.data1 = [],
      this.departmentsIndex = [],
      this.tbLoading = true,
      this.echar1Loading= true,
      this.echar2Loading= true,
      this.echar3Loading= true,
      this.echar4Loading= true,
      this.echar5Loading= true,
      this.echar6Loading= true,
      this.echar7Loading= true,
      this.echar8Loading= true,
      request({
        url: "/api/xs/export?year=" + this.yearPick,
        method: "get",
      }).then((res) => {
        res.forEach((e, index) => {
          if (e.companystartdate) {
            // 把人的和部门的区分(人)
            myindex = myindex + 1;
            this.data.push({
              number: myindex,
              department: e.deptname, // 部门
              time: e.companystartdate, //入职时间
              name: e.lastname, //姓名
              before: e.htpre, //合同回款额，2021年以前
              after: e.htcur, //合同回款额，今年
              huikuanlv: e.hkl + "%", //2021年回款率
              quannian: e.hte, //全年合同额（万元）
              yijidu: e.ht1, //一季度合同额（万元）
              erjidu: e.ht2, //二季度合同额（万元）
              sanjidu: e.ht3, //三季度合同额（万元）
              sijidu: e.ht4, //四季度合同额（万元）
              hetongexiaoji: e.xj, //合同得分小计
              zaitushu: e.ztSbs, //在途申报数
              wubaiyixia: e.htdown, //500以下及未有预算
              wubaidaoyiqianwu: e.htmid, //500-1500
              yiqianwuyishang: e.htup, //1500以上
              zaituxiaoji: e.ztXj, //在途得分小计
              beianshu: e.baSbs, //备案申报数
              changguixiangmu: e.htnormal, //常规项目
              zhongdianxiangmu: e.htimportant, //重点项目
              beianxiaoji: e.baXj, //备案得分小计
              toubiaoshu: e.tbcount, //投标数
              toubiaoxiaoji: e.tbXj, //小计
              richangfen: e.khf, //日常考核分
              total: e.zf, //总分
            });
          } else {
            // 部门
            this.departmentsIndex.push(index);
            this.data.push({
              number: e.deptname,
              department: e.deptname, // 部门
              time: e.companystartdate, //入职时间
              name: e.lastname, //姓名
              before: e.htpre, //合同回款额，2021年以前
              after: e.htcur, //合同回款额，今年
              huikuanlv: e.hkl + "%", //2021年回款率
              quannian: e.hte, //全年合同额（万元）
              yijidu: e.ht1, //一季度合同额（万元）
              erjidu: e.ht2, //二季度合同额（万元）
              sanjidu: e.ht3, //三季度合同额（万元）
              sijidu: e.ht4, //四季度合同额（万元）
              hetongexiaoji: e.xj, //合同得分小计
              zaitushu: e.ztSbs, //在途申报数
              wubaiyixia: e.htdown, //500以下及未有预算
              wubaidaoyiqianwu: e.htmid, //500-1500
              yiqianwuyishang: e.htup, //1500以上
              zaituxiaoji: e.ztXj, //在途得分小计
              beianshu: e.baSbs, //备案申报数
              changguixiangmu: e.htnormal, //常规项目
              zhongdianxiangmu: e.htimportant, //重点项目
              beianxiaoji: e.baXj, //备案得分小计
              toubiaoshu: e.tbcount, //投标数
              toubiaoxiaoji: e.tbXj, //小计
              richangfen: e.khf, //日常考核分
              total: e.zf, //总分
            });
          }
        });
        
        this.tbLoading = false;
        // console.log(this.data,"bbbfffff")
        // res end
        this.echart1();
        this.echart2();
        this.echart3();
        this.echart4();
        this.echart5();
        this.echart6();
        this.echart7();
        this.echart8();
      });

      // end
    },

    echart1() {
      const person = [];
      const score = [];
      this.data.forEach((v) => {
        if (v.time) {
          person.push(v.name);
          score.push(v.total);
          this.data1.push({
            name: v.name,
            total: v.total,
          });
        }
      });
      this.echar1Loading = false;
      // 基于准备好的dom，初始化echarts实例
      var myChart1 = this.$echarts.init(document.getElementById("main1"));
      // 绘制图表
      myChart1.setOption({
        color: ["#00a0e9"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          axisTick: { show: false },
           axisLabel: {
              //坐标轴刻度标签的相关设置。
              interval: 0,
              rotate: "45",
            },
          data: person,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: score,
            type: "bar",
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      });
    },
    echart2() {
      const person = [];
      const score = [];
      this.data.forEach((v) => {
        if (!v.time && v.time != null) {
          person.push(v.name);
          score.push(v.total);
          this.data1.push({
            name: v.name,
            total: v.total,
          });
        }
      });
      this.echar2Loading = false;
      // 基于准备好的dom，初始化echarts实例
      var myChart2 = this.$echarts.init(document.getElementById("main2"));
      // 绘制图表
      myChart2.setOption({
        color: ["#00a0e9"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          axisTick: { show: false },
          data: person,
           axisLabel: {
              //坐标轴刻度标签的相关设置。
              interval: 0,
              rotate: "45",
            },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: score,
            type: "bar",
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      });
    },
    echart3() {
      const person = [];
      const zaituscore = [];
      const beianscore = [];
      this.data.forEach((v) => {
        if (v.time) {
          person.push(v.name);
          zaituscore.push(v.zaituxiaoji);
          beianscore.push(v.beianxiaoji);
        }
      });
      this.echar3Loading = false;
      // 基于准备好的dom，初始化echarts实例
      var myChart3 = this.$echarts.init(document.getElementById("main3"));
      // 绘制图表
      myChart3.setOption({
        color: ["#00a0e9", "#9ddc9d", "#4cabce", "#e5323e"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["在途", "备案"],
        },

        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: person,
            axisLabel: {
              //坐标轴刻度标签的相关设置。
              interval: 0,
              rotate: "45",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "在途",
            type: "bar",
            barGap: 0,
            data: zaituscore,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否展示
                  position: "top",
                },
              },
            },
          },
          {
            name: "备案",
            type: "bar",

            data: beianscore,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否展示
                  position: "top",
                },
              },
            },
          },
        ],
      });
    },
    echart8() {
      const person = [];
      const zaitushuliang = [];
      const beianshuliang = [];
      this.data.forEach((v) => {
        if (v.time) {
          person.push(v.name);
          zaitushuliang.push(v.zaitushu);
          beianshuliang.push(v.beianshu);
        }
      });
      this.echar8Loading = false;
      // 基于准备好的dom，初始化echarts实例
      var myChart8 = this.$echarts.init(document.getElementById("main8"));
      // 绘制图表
      myChart8.setOption({
        color: ["#00a0e9", "#9ddc9d", "#4cabce", "#e5323e"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["在途", "备案"],
        },

        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: person,
            axisLabel: {
              //坐标轴刻度标签的相关设置。
              interval: 0,
              rotate: "45",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "在途",
            type: "bar",
            barGap: 0,
            data: zaitushuliang,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否展示
                  position: "top",
                },
              },
            },
          },
          {
            name: "备案",
            type: "bar",

            data: beianshuliang,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否展示
                  position: "top",
                },
              },
            },
          },
        ],
      });
    },
    echart4() {
      const person = [];
      const zaituscore = [];
      const beianscore = [];
      this.data.forEach((v) => {
        if (!v.time && v.time != null) {
          person.push(v.name);
          zaituscore.push(v.zaituxiaoji);
          beianscore.push(v.beianxiaoji);
        }
      });
      this.echar4Loading = false;
      // 基于准备好的dom，初始化echarts实例
      var myChart4 = this.$echarts.init(document.getElementById("main4"));
      // 绘制图表
      myChart4.setOption({
        color: ["#00a0e9", "#9ddc9d", "#4cabce", "#e5323e"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["在途", "备案"],
        },

        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: person,
            axisLabel: {
              //坐标轴刻度标签的相关设置。
              interval: 0,
              rotate: "45",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "在途",
            type: "bar",
            barGap: 0,
            data: zaituscore,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否展示
                  position: "top",
                },
              },
            },
          },
          {
            name: "备案",
            type: "bar",

            data: beianscore,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否展示
                  position: "top",
                },
              },
            },
          },
        ],
      });
    },
     echart7() {
      const person = [];
      const zaitushu = [];
      const beianshu = [];
      this.data.forEach((v) => {
        if (!v.time && v.time != null) {
          person.push(v.name);
          zaitushu.push(v.zaitushu);
          beianshu.push(v.beianshu);
        }
      });
      this.echar7Loading = false;
      // 基于准备好的dom，初始化echarts实例
      var myChart7 = this.$echarts.init(document.getElementById("main7"));
      // 绘制图表
      myChart7.setOption({
        color: ["#00a0e9", "#9ddc9d", "#4cabce", "#e5323e"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["在途", "备案"],
        },

        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: person,
            axisLabel: {
              //坐标轴刻度标签的相关设置。
              interval: 0,
              rotate: "45",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "在途",
            type: "bar",
            barGap: 0,
            data: zaitushu,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否展示
                  position: "top",
                },
              },
            },
          },
          {
            name: "备案",
            type: "bar",

            data: beianshu,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否展示
                  position: "top",
                },
              },
            },
          },
        ],
      });
    },
    echart5() {
      const person = [];
      const hetonge = [];
      this.data.forEach((v) => {
        if (v.time) {
          person.push(v.name);
          hetonge.push(v.quannian);
        }
      });
      this.echar5Loading = false;
      // 基于准备好的dom，初始化echarts实例
      var myChart5 = this.$echarts.init(document.getElementById("main5"));
      // 绘制图表
      myChart5.setOption({
        color: ["#00a0e9"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          data: person,
           axisLabel: {
              //坐标轴刻度标签的相关设置。
              interval: 0,
              rotate: "45",
            },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: hetonge,
            type: "bar",
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      });
    },
    echart6() {
      const person = [];
      const hetonge = [];
      this.data.forEach((v) => {
        if (!v.time && v.time != null) {
          person.push(v.name);
          hetonge.push(v.quannian);
        }
      });
      this.echar6Loading = false;
      // 基于准备好的dom，初始化echarts实例
      var myChart6 = this.$echarts.init(document.getElementById("main6"));
      // 绘制图表

      myChart6.setOption({
        color: ["#00a0e9"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          data: person,
           axisLabel: {
              //坐标轴刻度标签的相关设置。
              interval: 0,
              rotate: "45",
            },
        },

    
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: hetonge,
            type: "bar",
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      });
    },
    // 弹出日历和关闭日历的回调
    handleOpenChange(status) {
      // console.log(status,'============')
      this.yearPickShow = status;
    },
    // 得到年份选择器的值
    handlePanelChange(value) {
      let time = new Date(value);
      this.yearPick = time.getFullYear().toString();
      this.yearPickShow = false;
      this.init();
    },
    //导出
    exprot() {
      request({
        url: "/api/xs/export?year=" + this.yearPick + "&path=1",
        method: "get",
      }).then((res) => {
        window.location.href = `api` + res;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.gutter-example >>> .ant-row > div {
  background: transparent;
  border: 0;
}
.gutter-box {
  padding: 5px 0;
}
.main {
  height: 400px;
  width: 100%;
}
.echart-pic {
  height: 400px;
  width: 100%;
  line-height: 400px;
  text-align: center;
}
.mycard .ant-col {
  margin-bottom: 10px;
}
/deep/ .ant-table-row-cell-break-word {
  text-align: center;
}
/deep/ .rowcolor {
  background: #daeef3;
}

// /deep/ .mytable .ant-table-thead >
// tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) >
//  td, .ant-table-tbody >
//   tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) >
//   td, .ant-table-thead > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
//    .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td{
//   background: none;
// }
</style>
